  <div class="f-nav-detail">
        <detail-nav></detail-nav>
    </div>

<div class="Popup">
    <div class="PopupTop">
        <h1 ng-bind="signTit"></h1>
        <p>价格<span ng-bind="signPrice"></span></p>
    </div>
    <form action="">
        <a ng-click="signUp()" id="signUp" href="javascript:;">立即报名</a>
    </form>
</div>
<div class="details-topbox">
    <div class="details-top">
        <div class="route">
            <ul>
                <li><a ng-click="go()">工程e学堂</a><span>></span></li>
   
                	 <li><a ng-click="golistOn(TopLink.category.topCategory.tcId)" ng-bind="TopLink.category.topCategory.tcName"></a><span>></span></li>
	                <li><a ng-click="golistTw(TopLink.category.topCategory.tcId,TopLink.category.secCategory.scId)" ng-bind="TopLink.category.secCategory.scName"></a><span>></span></li>
	                <li ng-if="TopLink.category.thirdCategory"><a ng-click="golistTh(TopLink.category.topCategory.tcId,TopLink.category.secCategory.scId,TopLink.category.thirdCategory.dcId)" ng-bind="TopLink.category.thirdCategory.dcName"></a><span>></span></li>
	                <li><a ng-bind="courseTit"></a><span></span></li>
   
               
            </ul>
        </div>
        <img class="titleImg" src="them/imgs/noSrc.png"  ng-src="{{ courseImg }}" alt="课程图片"/>
        <div class="introduce">
            <div class="h" ng-bind="courseTit"></div>
            <div class="videoTag">
                <a href="javascript:;" ng-click="linkSearch(items.labelName)" ng-repeat="items in labid" ng-bind="items.labelName"></a>
            </div>
            <div class="introduceCon">
                <div class="num"><span ng-bind="size"></span>个视频</div>
                <div class="howdoing"><span>{{ studys }}</span>人正在学习</div>
                <div class="evaluate">
                    (<span ng-bind="peopleNum"></span>人评价)
                    <div class="start">
                        <div class="starCon">
                            <div star rating-value="ratingVal" max="max" on-hover="onHover" on-leave="onLeave" readonly="{{readonly}}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="introduceCon">
                <span style="float: left;">课程有效期:永久有效</span>
                <a href="javascript:;" jia-share conf-data="share" ng-if="share" class="share"></a>
                <a href="javascript:;" ng-click="collection()" class="collection">
                    收藏
                </a>
            </div>
            <div class="zero">
            </div>
            <a ng-show="jodes==1" id="btnPlay" ng-click="showPlay()">立即播放</a>
            <a ng-hide="jodes==1" id="nowbtn">立即学习</a>
            <a id="addCar" ng-click="addCar()">加入购物车</a>

        </div>
    </div>
</div>
<div class="bg">
    <div class="box" on-repeat-finished-render>
        <div class="tab" id="tabBox" scrolls>
            <div class="tab-top">
                <a class="detaiTab detailsa" ng-click="MoveVideo()" href="javascript:;">课程详情</a>
                <a class="cataTab" ng-click="MovevideoCata()" href="javascript:;">课程目录</a>
                <a class="videoTab" ng-click="MoveEvaluCon()" href="javascript:;">课程评价</a>
            </div>
            <div class="tab-center">
                <div class="centerCon" ng-bind="introduction">
                    <!--视频详情-->
                </div>
            </div>
        </div>
        <div class="catalog" id="catalog">
            <div class="catalog-top">课程目录</div>
            <div class="catalog-center">
                <div ng-repeat="item in courseData track by $index" class="chapter" >
                    <div style="width:100%;height: 24px;background:#fff;margin-bottom:-3px ;"></div>
                    <div class="chapterTop" >
                               <span class="Bigchaper">
                                    第<b style="font-weight: normal;" ng-bind="$index+1|Chinese"></b>章
                               </span>
                        <span>{{ item.chapterName }}</span>
                    </div>
                    <div style="width:100%;height: 24px;background:#fff;margin-bottom:-3px ;"></div>
                    <div ng-repeat="childItem in item.childChapterList track by $index"  class="course">
                        <span class="chaperName">第<b style="font-weight: normal;" ng-bind="$index+1|Chinese"></b>节</span><a>{{ childItem.chapterName }}</a>
                        <span class="videoname" ng-repeat="timeItem in childItem.videoList">
                                 	<i class="iconfont" style="color: #30a3ff;font-size:18px;padding-right: 21px;">&#xe609;</i>
                                 	<b  ng-click="goTo2(timeItem)" style="font-weight: normal;"ng-bind="timeItem.videoName"></b>
                                 	<b class="videoTime" ng-bind="timeItem.videoTime"></b>
                                 </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="evaluateCon" id="evaluateCon">
            <div class="evaCenter">
                <!--评论-->
                <div class="evaCon">
                    <div i-comment   comment-conf="commentConf" ></div>
                </div>
                <!--讲师简介·-->
                <div class="r-boxone" ng-if="compangyInfo">
                    <div class="user-pic" ng-click="companyout()">
                    	<img src="them/imgs/noLogo.png" ng-src="{{ compangyInfo.logo }}" alt="讲师logo" /></div>
                    <div class="user-h1">企业介绍</div>
                    <div class="username" ng-bind="compangyInfo.fullName"></div>
                    <div class="user-h2">简介：</div>
                    <div class="jbborder1"></div>
                    <p class="p" ng-bind="compangyInfo.introduction|getRightComCon"></p>
                    <!--<div class="user-h3">该企业的课程：<a ng-bind="teacherCOunt"></a>个</div>-->
                    <div class="jbborder2"></div>
                    <div class="otherCouse">
                        <ul>
                            <li ng-click="switchVideo(item)" ng-repeat="item in teacherList">
                                <a ng-bind="item.title"></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--相关视频-->
                <div class="r-boxtwo">
                    <h2>相关课程</h2>
                    <ul class="SameVideo">
                        <li ng-repeat="item in SameVideoCon track by $index"  ng-click="switchVideo(item)"><a ng-bind="item.title"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

<div class="addCar" ng-if="isAddCar">
    <a href="" ng-click="closeCar()">X</a>
  已成功加入购物车！
</div>


<style type="text/css">
.engMainnav-container{
	display: none;
}
.addCar{
    width: 348px;
    height:158px;
    font-size: 18px;
    line-height: 158px;
    background: #fff;
    text-align: center;
    border:1px solid #30a3ff;
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}
.addCar a{
    position: absolute;
    font-size: 18px;
    line-height: 18px;
    top:5%;
    right:5%;
}
    .details-topbox{
        width:100%;
        height:372px;
        background-color:#fff;
        overflow:hidden;
    }
    .details-top{
        width:1200px;
        height:372;
        margin:0 auto;
        overflow:hidden;
    }
    .details-top img.titleImg{
        float:left;
        display:inline-block;
        width:450px;
        height:286px;

    }
    .route{
        margin-top:35px;
        margin-bottom:18px;
    }
    .route ul li{
        display:inline-block;

    }
    .f-comment-write img{
    	margin-right: 20px;
    }
    .route a{
        text-decoration: none;
        font-size:12px;
        color:#999;
    }
    .route ul li span{
        margin-left:19px;
        margin-right:15px;
        color:#999;
    }
    .introduce{
        float:left;
        width:659px;
        height:286px;
        margin-left:91px;
        overflow:hidden;
    }
    .introduceCon{
        overflow: hidden;
    }
    .h{
        font-size: 26px;
        color: #000;
        margin-bottom:28px;
    }
    .videoTag{
        height:20px;
        width:100%;
        margin-bottom:15px;
    }
    .videoTag a{
        padding: 0 19px 0 19px;
        height: 18px;
        display: inline-block;
        border: 1px solid #ddd;
        text-align: center;
        line-height: 18px;
    }
    .videoTag a:nth-of-type(1){
        color: #30a3ff;
        border-color: #30a3ff;
    }
    .lecturer{
        font-size:12px;
        color:#666;
    }
    .company{
        position: absolute;
        left:108px;
        top:1px;
        font-size:12px;
        color:#666;
    }
    .num{
        font-size:12px;
        color:#666;
        float: left;
        margin-right: 35px;
    }
    .howdoing{
        float: left;
        font-size:12px;
        color:#666;
    }
    .evaluate{
        float: left;
        top:33px;
        font-size:12px;
        color:#666;
        margin-left: 35px;
    }

    .zero{
        color: #f00;
        font-size: 16px;
        margin: 30px 0 14px 0;
    }
    #btnPlay,#nowbtn2,#nowbtn{
        float:left;
        text-decoration: none;
        display: inline-block;
        width:160px;
        height:46px;
        color:#fff;
        background-color:#30a3ff;
        text-align: center;
        line-height:46px;
        font-size:18px;
        margin-top: 36px;
    }
    #addCar{
        float:left;
        text-decoration: none;
        display: inline-block;
        width:158px;
        height:44px;
        color:#30a3ff;
        border:1px solid #30a3ff;
        text-align: center;
        line-height:46px;
        font-size:18px;
        margin-top: 36px;
        margin-left: 20px;
    }
    .share{
        float:left;
        display:inline-block;
        text-decoration: none;
        padding-left:23px;
        color:#666;
        font-size:14px;
        background:url("them/imgs/share.png") 0px 2px no-repeat;
        background-size:16px 16px;
    }
    .collection{
        float:left;
        display:inline-block;
        text-decoration: none;
        margin-left:90px;
        padding-left:22px;
        color:#666;
        font-size:14px;
        background:url("them/imgs/collection.png") 0px 2px no-repeat;
        background-size:16px 15px;
    }
    .share:hover,.collection:hover{

        color:#30a3ff;
    }

    .bg{
        background:url("them/imgs/jb-bg.png") 0px 0px repeat;
    }
    .box{
        position:relative;
        width:1200px;
        margin:0 auto;
        overflow:hidden;
    }
    .tab{
        width:868px;
        height:199px;
        background-color:#fff;
        border:1px #ddd solid;
        margin-top:20px;
        overflow:hidden;
    }
    .catalog{
        width:868px;
        border:1px #ddd solid;
        background-color:#fff;
        margin-top:20px;
        overflow-x:none;
        overflow-y:block;
    }
    .evaluateCon{
        width:868px;
        overflow: hidden;
        background: #fff;
        margin-bottom:60px;
        border:1px #ddd solid;
        background-color:#fff;
        margin-top:30px;
        margin-bottom:60px;
    }

    .evaCenter{
        width:830px;
        height:134px;
        margin:10px 0 0 20px;
    }

    .evaCon {
        width:100%;
        margin:0 auto;
        overflow: hidden;
    }

    .r-boxone{
        position:absolute;
        width:309px;
        height:571px;
        right:0px;
        top:20px;
        background-color:#fff;
        border:1px #ddd solid;
        overflow: hidden;
    }

    .r-boxone a:hover{
        color: #30a3ff;
        text-decoration: underline;
    }
    .r-boxtwo{
        position:absolute;
        width: 309px;
        height:341px;
        right:0px;
        top:600px;
        background-color:#fff;
        border:1px #ddd solid;
    }
    .r-boxtwo h2 {
        font-size:16px;
        width: 267px;
        height:52px;
        line-height:52px;
        padding-left:29px;
        border-bottom:1px solid #e9e9e9;
        margin-left:5px;
        background: url("them/imgs/zfx.png") 5px 20px no-repeat;

    }
    .r-boxtwo ul {
        margin-top:14px;
        width: 267px;
        margin-left:5px;
    }
    .r-boxtwo ul li {
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
        width:247px;
        height:27px;
        padding-left:20px;
        background:url("them/imgs/zfxs.png") 5px 9px no-repeat;
    }
    .r-boxtwo ul li a {
        font-size:14px;
    }
    .r-boxtwo ul li a:hover{
        color: #30a3ff;
        text-decoration: underline;
    }
    .box div{
        display:inline-block;
    }
    .box div.f-usercomment-down {
        text-align: center;
        display: block;
    }
    .tab-top{
        width:100%;
        height:48px;
        border-bottom:1px #ddd solid;
        background: #fff;
    }
    .tab-top a{
        float: left;
        text-decoration:none;
        display: inline-block;
        width:120px;
        height:48px;
        color:#000;
        font-size:16px;
        border-bottom:1px #ddd solid;
        text-align:center;
        line-height:44px;

    }
    .tab-top .detailsa{
        height:45px;
        color:#30a3ff;
        border-bottom:3px #30a3ff solid;
    }
    .tab-center{
        overflow:hidden;
    }
    .tab-center .centerCon {
        text-indent: 2em;
        font-size: 14px;
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 20px;
        height: 150px;
    }
    .tab-center p{
        padding:0;
        margin-left:19px;
        margin-right:24px;
        margin-bottom:18px;
        font-size:14px;
        color:#666;
        line-height:24px;
        text-indent:2em;

    }

    .catalog-top{
        float:left;
        width:100%;
        height:38px;
        color: #000;
        font-size:16px;
        line-height:38px;
        padding-left: 18px;
        overflow:hidden;
    }
    .catalog-center{
        margin-left: 20px;
        width: 849px;
        min-height: 474px;
        height: auto!important;
        height: 474px;
        margin-bottom: 30px;
    }
    .chapter{
        width:828px;
        height:auto;
        margin:0;
        background-color:#f5f5f5;
        font-size:14px;
        color:#666;
        background-color:#f5f5f5;
    }
    .chapterTop {
        width:100%;
        height:34px;
        line-height:34px;
    }
    .chapterTop span{
        font-size: 16px;
    }
    .chapterTop span.Bigchaper{
        display: block;
        float: left;
        width: 79px;
        text-align: center;
        margin-right: 11px;
    }
    .course{
        font-size:14px;
        width:100%;
        line-height: 34px;
    }
    .course:hover{
        color:#30a3ff;
    }
    .chaperName{
        display: block;
        font-size: 14px;
        float: left;
        width: 79px;
        height: 37px;
        background: #696969;
        color: #fff;
        text-align: center;
        line-height: 37px;
        margin-right: 11px;
    }
    .videoname{
        display: block;
        background: #fff;
        clear: both;
        height: 60px;
        line-height:60px;
        padding-left: 48px;
    }
    .videoname b{
        cursor: pointer;
        font-weight: normal;
        color: #999;
    }
    .videoTime{
        float: right;
        padding-right: 54px;
    }

    .user-pic{
        display: inline-block;
        width:60px;
        height:60px;
        border-radius:50%;
        overflow: hidden;
        margin-top:16px;
        margin-left:34px;
        cursor: pointer;
    }
    .user-pic img{
        width:60px;
        height:60px;
    }
    .user-h1{
        position:absolute;
        left:116px;
        top:23px;
        font-size:14px;
        color:#000;

    }
    .username{
        position:absolute;
        left:116px;
        top:51px;
        font-size:12px;
        color:#999;
    }
    .user-h2{
        position:absolute;
        left:34px;
        top:98px;
        font-size:14px;
        color:#333;
    }
    .jbborder1{
        width:309px;
        height:1px;
        background:url("them/imgs/jbborder.png") 0px 0px no-repeat;
        background-size:309px 1px;
        position:absolute;
        top:130px;
        left:0;
    }
    .p{
        margin-right:19px;
        margin-left:33px;
        margin-top:75px;
        text-indent:2em;
        color:#666;
        font-size:12px;
        overflow:hidden;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        white-space:wrap;
        width: 250px;
        height: 97px;
    }
    .user-h3{
        position:absolute;
        left:34px;
        top: 253px;
        font-size:14px;
        color:#333;
    }
    .otherCouse{
        position: absolute;
        top: 301px;
        left: 4px;
    }
    .otherCouse ul li{
        width: 247px;
        height: 27px;
        padding-left: 20px;
        background: url(them/imgs/zfxs.png) 5px 9px no-repeat;
    }
    .otherCouse ul li a{
        font-size:14px;
    }
    .jbborder2{
        width:309px;
        height:1px;
        background:url("them/imgs/jbborder.png") 0px 0px no-repeat;
        background-size:309px 1px;
        position:absolute;
        top:285px;
        left:0;
    }
    .start {
        float: left;
    }
    .starCon{
        float: left;
        width:80px;
        height:21px;
        padding-right:15px;
    }
    /*星级评价*/
    /* .rating {
         position: relative;
     }*/
    .f-username{
        position: relative;
        top: 20px;
        right:-134px;
    }
    .f-usercomment-down .f-usercomment-down-r {
        float: right;
        position: relative;
        right: -152px;
    }
    .f-comment-publish{
        float: left;
    }
    .f-comment-publish .f-publish-btn{
        margin-right: -110px;
    }
    ul.rating {
        display: inline-block;
    }
    .rating p {
        display: inline-block;
        width:16px;
        height:16px;
        background: url("them/imgs/star-off.png") no-repeat;
        cursor: pointer;
    }
    .rating .filled {
        background: url("them/imgs/star-on.png") no-repeat;
    }

    .Popup {
        position: absolute;
        left:0;
        right:0;
        top:175px;
        bottom:0;
        margin:0 auto;
        width:450px;
        height:286px;
        z-index:100;
        background: #fff;
        display: none;
    }
    .PopupTop {
        width:450px;
        height:120px;
        line-height:40px;
        font-size:24px;
        text-align: center;
        margin-top:20px;
    }
    .PopupTop h1 {
        font-size:24px;
        width:450px;
        text-align: center;
    }
    .PopupTop p {
        width:450px;
        font-size:16px;
        margin-top:20px;
        text-align: center;
    }
    .Popup a {
        display: block;
        background: #30a3ff;
        width:120px;
        height:30px;
        margin:0 auto;
        text-align: center;
        line-height:30px;
        margin-top:109px;
        color: #fff;
    }
    .commonColor {
        color:#30a3ff;
    }

</style>




